<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #droptarget {
        width: 300px;
        height: 300px;
        background-color: bisque;
      }
      #output{
        width: 200px;
        height: 200px;
        background-color:aqua;
      }
      img {
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="droptarget"></div>
    <div id="output"></div>
  </body>
  <script>
    // 组合使用 HTML5 拖放 API 与 File API 可以创建读取文件信息的有趣功能。
    // 在页面上创建放置目标后，可以从桌面上把文件拖动并放到放置目标。这样会像拖放图片或链接一样触发 drop 事件。
    // 被放置的文件可以通过事件的 event.dataTransfer.files 属性读到，这个属性保存着一组 File 对象，
    const droptarget = document.getElementById('droptarget');
    function handleEvent(event) {
      let info = '';
      let output = document.getElementById('output');
      let files = '';
      event.preventDefault();
      if (event.type === 'drop') {
        files = event.dataTransfer.files;
        for (let i = 0; i < files.length; i++) {
        //   info += `${files[i].name},${files[i].type},${files[i].size}<br>`;
         let url = window.URL.createObjectURL(files[i]);
         info +=`<img src=${url}><br>`
        }
      }
      output.innerHTML = info;
    }
    droptarget.addEventListener('dragenter', handleEvent);
    droptarget.addEventListener('dragover', handleEvent);
    droptarget.addEventListener('drop', handleEvent);
  </script>
</html>
